上一篇提到如何與 aws 建立連線，此篇要進一步的讓前端系統在 AWS 上部署並利用 CI/CD 自動部署應用，這邊會使用到 gitlab 的自動化腳本 gitlab-cli 來進行。

在之前建立完 todo list 的前端應用後，我們可以使用指令來幫助我們打包 Vue 框架的程式為網頁靜態檔案並將其放上 AWS S3 進行部署，如此一來就可以造訪網址看到系統。

建立 S3 bucket

執行 yarn build 產生靜態檔案

$ yarn build

此時會產生 dist 資料夾而裡面包含我們所需要部署的檔案

透過 aws cli 將檔案全部上傳至指定的 AWS S3 bucket

$ aws s3 sync . s3//ci-todo-list

建立存取點

最後將 s3 bucket 設定存取點即可讓 s3 bucket 能提供網頁伺服器的功能，讓使用者拜訪網址即可看到網頁內容

CI/CD

手動部署沒問題後我們可以嘗試使用自動部署，透過使用 gitlab 的功能，設置 gitlab cli 腳本後，可設定 git 特定行為後可進行部署，例如 MR 被合併後。

image: node:14

stages:
  - build
  - deploy

build_alpha:
  stage: build
  script:
    - yarn install
    - yarn build --mode alpha
  artifacts:
    paths:
      - dist/
  only:
    - alpha

deploy_alpha:
  stage: deploy
  image: python:3.6-alpine
  dependencies:
    - build_alpha
  before_script:
    - pip install awscli
  script:
    - aws s3 sync dist/ $ALPHA_S3_BUCKET --delete
  only:
    - alpha